<template>
  <div>
    <a-button
      class="mb-4"
      type="primary"
      size="small"
      ghost
      @click="newConfig.show = true"
      v-if="props.editMode"
    >
      添加
    </a-button>
    <table v-if="props.headers && props.headers.length > 0">
      <thead>
        <tr>
          <th v-for="item in props.headers" :key="item.id">{{ item.key }}</th>
        </tr>
      </thead>
      <tbody v-if="tableValue.length > 0">
        <tr v-for="(item, key) in tableValue" :key="key">
          <td v-for="v in item">
            <span v-if="v !== ''">{{ v.value }}</span>
            <span v-else>空</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="tableValue.length == 0" class="w-100 flex flex-s px-8">
      <div class="text-center">
        <Empty width="100" />
        <a-button
          class="my-4"
          type="primary"
          size="small"
          ghost
          @click="newConfig.show = true"
          v-if="props.editMode"
        >
          新建一个
        </a-button>
      </div>
    </div>
    <!-- 新增属性 -->
    <div v-if="newConfig.show" class="dialog p-8 border-1">
      <div class="mb-4 text-999 flex justify-between">
        <div>新增一项</div>
        <div><CloseCircleOutlined @click="newConfig.show = false" /></div>
      </div>
      <ListItem v-for="item in props.headers" class="mb-4 text-nowrap">
        <div>{{ item.key }}</div>
        <div><a-input v-model:value="item.value" :placeholder="item.tips"></a-input></div>
      </ListItem>
      <div class="text-right px-8">
        <a-button type="primary" size="small" @click="comfirm">确定</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Empty from "../components/InEmpty.vue";
import ListItem from "../components/InListItem.vue";
import { tableValue } from "./bus";
const props = defineProps({
  headers: {
    type: Array<any>
  },
  title: String,
  editMode: Boolean
});

const newConfig = ref({
  show: false
});
const emit = defineEmits(["onConfirm"]);
const comfirm = () => {
  tableValue.push([]);
  let arr: Array<any> = [];
  props.headers?.forEach((item) => {
    if (!props.headers) return;
    let vk = {
      value: item.value,
      key: item.key
    };

    arr.push(vk);
    item.value = "";
  });
  tableValue.push(arr);
  newConfig.value.show = false;
  emit("onConfirm");
};
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  table-layout: fixed;

  td,
  th {
    text-align: center;
    border: 1px solid #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 40px;
    font-size: 12px;
  }
  thead {
    background-color: #555;
  }
  th {
    padding: 6px 0;
  }
  td {
    padding: 8px 0;
    color: #999;
    &:hover {
      background-color: #666;
      cursor: pointer;
    }
  }
  tbody {
    tr {
      &:hover {
        background-color: #494949;
      }
    }
  }
}
.dialog {
  position: absolute;
  top: 84px;
  left: 0;
  background-color: #494949;
  width: 100%;
  z-index: 10;
  border: 1px solid #999;
}
</style>
